import 'package:backendview/widget/custom_text_field.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'logic.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<HomeLogic>();
    final state = Get.find<HomeLogic>().state;
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Material(
                elevation: 2,
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 20),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Obx(() {
                        return CustomTextField(
                          "端口:",
                          value: state.port.value,
                          onChanged: (t) {
                            state.port.value = t;
                          },
                        );
                      }),
                      const SizedBox(
                        width: 30,
                      ),
                      ElevatedButton(
                          onPressed: () {
                            state.apiList.add(ApiBean(
                                method: "POST".obs,
                                route: "/route",
                                title: '请输入名字',
                                param: <Param>[].obs));
                          },
                          child: const Text("新建API")),
                      const SizedBox(
                        width: 10,
                      ),
                      ElevatedButton(
                          onPressed: logic.generate, child: const Text("生成")),
                    ],
                  ),
                ),
              ),
              const SizedBox(
                height: 10,
              ),
              Obx(() {
                return ListView.builder(
                  shrinkWrap: true,
                  itemCount: state.apiList.length,
                  physics: const NeverScrollableScrollPhysics(),
                  itemBuilder: (BuildContext context, int index) {
                    var bean = state.apiList[index];
                    return Padding(
                      padding: const EdgeInsets.symmetric(vertical: 5),
                      child: Material(
                        elevation: 2,
                        child: ExpansionTile(
                          title: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              PopupMenuButton<String>(
                                itemBuilder: (context) => [
                                  const PopupMenuItem(
                                    value: "POST",
                                    child: Text("POST"),
                                  ),
                                  const PopupMenuItem(
                                    value: "GET",
                                    child: Text("GET"),
                                  ),
                                ],
                                onSelected: (a) {
                                  bean.method.value = a;
                                },
                                child: Material(
                                  elevation: 2,
                                  borderRadius: BorderRadius.circular(8),
                                  child: Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Center(
                                      child: Obx(() {
                                        return Text(
                                          bean.method.value,
                                          style: const TextStyle(
                                              fontWeight: FontWeight.bold,
                                              color: Colors.blue),
                                        );
                                      }),
                                    ),
                                  ),
                                ),
                              ),
                              const SizedBox(
                                width: 10,
                              ),
                              CustomTextField(
                                "方法",
                                required: true,
                                value: bean.title,
                              ),
                              const SizedBox(
                                width: 10,
                              ),
                              CustomTextField(
                                "路由",
                                value: bean.route,
                                required: true,
                              ),
                            ],
                          ),
                          children: [
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Container(
                                decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.circular(10),
                                    border: Border.all(color: Colors.black)),
                                padding:
                                    const EdgeInsets.symmetric(horizontal: 20),
                                child: Column(
                                  children: [
                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.end,
                                      children: [
                                        Obx(() {
                                          return Text(
                                              "参数(${bean.param.length})");
                                        }),
                                        const SizedBox(
                                          width: 10,
                                        ),
                                        InkWell(
                                          onTap: () {
                                            bean.param.add(Param(
                                                key: "参数名字",
                                                type: ParamType.STRING.name.obs,
                                                value: "参数值"));
                                          },
                                          child: const Padding(
                                            padding: EdgeInsets.all(8.0),
                                            child: Text(
                                              "新增",
                                              style: TextStyle(
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.blue),
                                            ),
                                          ),
                                        )
                                      ],
                                    ),
                                    Obx(() {
                                      return ListView.builder(
                                        shrinkWrap: true,
                                        physics:
                                            const NeverScrollableScrollPhysics(),
                                        itemCount: bean.param.length,
                                        itemBuilder:
                                            (BuildContext context, int index) {
                                          var param = bean.param[index];
                                          return Row(
                                            children: [
                                              CircleAvatar(
                                                  radius: 10,
                                                  backgroundColor: Colors.blue,
                                                  child: Text(
                                                    "${index + 1}",
                                                    style: const TextStyle(
                                                        color: Colors.white,
                                                        fontSize: 13),
                                                  )),
                                              const SizedBox(
                                                width: 15,
                                              ),
                                              Row(
                                                children: [
                                                  CustomTextField(
                                                    param.key,
                                                  ),
                                                  Padding(
                                                    padding: const EdgeInsets
                                                        .symmetric(
                                                        horizontal: 20),
                                                    child:
                                                        PopupMenuButton<String>(
                                                      itemBuilder: (context) =>
                                                          [
                                                        PopupMenuItem(
                                                          value: ParamType
                                                              .STRING.name,
                                                          child: const Text(
                                                              "String"),
                                                        ),
                                                        PopupMenuItem(
                                                          value: ParamType
                                                              .BOOL.name,
                                                          child: const Text(
                                                              "boolean"),
                                                        ),
                                                      ],
                                                      onSelected: (a) {
                                                        param.type.value = a;
                                                      },
                                                      child: Padding(
                                                        padding:
                                                            const EdgeInsets
                                                                .symmetric(
                                                                horizontal: 10),
                                                        child: Container(
                                                          decoration:
                                                              const BoxDecoration(
                                                                  color: Colors
                                                                      .white),
                                                          child: Obx(() {
                                                            return Text(
                                                                "参数类型:${param.type.value}");
                                                          }),
                                                        ),
                                                      ),
                                                    ),
                                                  ),
                                                  CustomTextField(param.value),
                                                ],
                                              ),
                                              InkWell(
                                                onTap: () {
                                                  bean.param.remove(param);
                                                },
                                                child: const Padding(
                                                  padding: EdgeInsets.all(8.0),
                                                  child: Text(
                                                    "移除",
                                                    style: TextStyle(
                                                        color: Colors.red,
                                                        fontWeight:
                                                            FontWeight.bold),
                                                  ),
                                                ),
                                              )
                                            ],
                                          );
                                        },
                                      );
                                    })
                                  ],
                                ),
                              ),
                            ),
                            ElevatedButton(
                                onPressed: () {}, child: const Text("保存")),
                            const SizedBox(
                              height: 10,
                            )
                          ],
                        ),
                      ),
                    );
                  },
                );
              })
            ],
          ),
        ),
      ),
    );
  }
}
